<template>
	<view class="article-detail" v-if="!isLoading">
    <view class="" :style="'margin-top:'+($xyfun.xysys().buttonBound.top)+'px;'">
      <view class="navBarTit">
        <view class="yz-iconfont yz-jiantou1" @tap="$xyfun.back()"></view>
        <text></text>
      </view>
    </view>
    <view class="title">
      {{article.name}}
    </view>
		<view class="content p-30">
			<rich-text :nodes="article.content"></rich-text>
		</view>
    <view class="file_box" v-if="article.file">
      <view class="file" @tap="downloadFile">文件下载</view>
    </view>

    <view class="comment_list" v-if="actionShow">
      <view class="tit">评论列表</view>
      <view class="lists" v-if="commentList.length>0">
        <view class="item" v-for="val in commentList">
          <view class="user">
            <image class="avatar-70" :src="$xyfun.image(val.user.avatar)"></image>
            <view class="nickname">{{val.user.nickname}}</view>
          </view>
          <view class="cont">{{val.content}}</view>
        </view>
      </view>
      <view class="empty" v-else>暂无更多评价...</view>
    </view>

    <view class="tool" v-if="actionShow">
      <view class="yz-iconfont yz-dianzan" @tap="toLike" v-if="isLike==0"></view>
      <view class="yz-iconfont yz-dianzan1" @tap="toLike" style="color:#ed8c1b;" v-else></view>
      <view class="but" @tap="commentBut">评价</view>
    </view>

    <!--评价-->
    <block>
      <view class="xy-modal-box xy-modal-box-center qrcode-model-box p-tb-20 p-lr-30 br-10 bg-w" :class="[commentShow?'xy-modal-show':'']">
        <view class="comment" v-if="commentShow">
          <textarea @input="commentInput" placeholder="请填写您对这篇文章的看法"></textarea>
          <view class="combut" @tap="comment_submit">提交评论</view>
        </view>
      </view>
      <view class="xy-modal-mask" :class="[commentShow?'xy-mask-show':'']" @tap="commentShow =!commentShow"></view>
    </block>
	</view>
</template>

<script>
	

  export default {
    components: {},
		
		data() {
			return {
				isLoading:true,
				id: '',
				article:{},
        commentList: [],
        comment: '',
        commentShow: false,
        actionShow : true,

        isLike: 0,
        likeDisable : false
			}
		},
		async onLoad(options) {
			var that = this;
			if(options){
				this.id = options.id;
			}
			that.loadData();
		},
		methods: {
			
			async loadData(){
				this.$api.getBase({
					url: '/news/detail',
					loadingTip:'加载中...',
					data: {
						id:this.id,
					},
					success: res => {
            if(res.is_sys==1){
              this.actionShow = false;
            }
						this.article = res;
            this.commentList = res.comment;
            this.isLike = res.isLike;
						this.article.content = this.article.content.replace(/\<img/g, "<img style='max-width: 100%;vertical-align: middle;'");
            this.isLoading = false;
					}
				});
			},

      //提交评论
      comment_submit(){
        var that = this;
        this.$api.postBase({
          url : '/news/comment',
          loadingTip:'加载中...',
          data : {
            news_id : this.id,
            content : this.comment,
          },
          success: res=>{
            this.$xyfun.msg('评论成功');
            that.commentShow = false;
            that.loadData();
          }
        })
      },
      //写入评论
      commentInput(e){
        this.comment = e.detail.value;
      },
      //评论按钮
      commentBut(){
        this.commentShow = true;
      },

      //点赞
      toLike(){
        if(this.likeDisable){
          return;
        }
        this.likeDisable = true
        this.$api.postBase({
          url : '/news/like',
          data : {
            news_id : this.id,
          },
          success: res=>{
            this.isLike = res;
            this.likeDisable = false;
          }
        })
      },


      downloadFile(){
        let fileUrl = this.article.file;
        // let fileUrl = 'https://jiajiao.fzyzkj.com.cn/uploads/20250225/c4b08df6fe34fb07dbfba8894206862f.jpg'; // 替换为实际文件的URL
        // fileUrl = 'https://jiajiao.fzyzkj.com.cn/school.xlsx';

        var ext = this.$xyfun.get_file_extension(fileUrl);

        var doc_ext = ['xls','xlsx','doc','docx','pdf'];
        var image_ext = ['jpg','jpeg','png','gif'];
        uni.downloadFile({
          url: this.$xyfun.image(fileUrl), //仅为示例，并非真实的资源
          success: (res) => {
            //打开文档
            if(doc_ext.indexOf(ext) !== -1){
              wx.openDocument({
                filePath:res.tempFilePath,
                showMenu:true,
                success(res){
                  console.log(res)
                }
              })
            }

            //打开图片
            if(image_ext.indexOf(ext) !== -1){
              // 保存图片到相册
              uni.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,  // 图片的路径，可以是本地路径或者临时路径
                success(res) {
                  console.log('图片保存成功', res);
                },
                fail(err) {
                  console.log('图片保存失败', err);
                }
              });
            }

          }
        });
      }
			
		}
	}
</script>
<style>
pages{
  overflow: hidden;
}
</style>
<style scoped lang="scss">
  .navBarTit{
    height: 60rpx;
  }
  .title{
    width: 80%;
    margin: 0 auto;
    text-align: center;
    font-weight: bold;
    font-size: 32rpx;
  }
	.article-detail{
    overflow: hidden;
    padding-bottom: 140rpx;
		.content{text-align: justify;}
    .file_box{
      text-align: right;
      padding: 30rpx;
      .file{
        font-size: 24rpx;
        color: $uni-color-primary;
      }
    }
	}

  .comment_list{
    margin-top: 100rpx;
    border-top: 1rpx solid #ececec;
    padding: 20rpx 30rpx;
    .tit{
      font-size: 30rpx;
      &:before{
        display: inline-block;
        content: '';
        width: 10rpx;
        height: 10rpx;
        background: #ed8c1b;
        border-radius: 5rpx;
        margin-right: 20rpx;
        vertical-align: middle;
      }
    }
    .lists{
      .item{
        display: flex;
        margin: 30rpx 0;
        .user{
          text-align: center;
          margin-right: 40rpx;
          .nickname{
            margin-top: 10rpx;
            font-size: 22rpx;
          }
        }
        .cont{
          flex-grow: 1;
          padding: 20rpx;
          box-sizing: border-box;
          border-radius: 10rpx;
          background: #f2f2f2;
          font-size: 26rpx;
          margin-bottom: 20rpx;
          color: #969696;
        }
      }
    }
    .empty{
      color: #969696;
      font-size: 24rpx;
      text-align: center;
      margin-top: 70rpx;
    }
  }

  .comment{

    textarea{
      z-index: 0;
    }
    .combut{
      background: #ed8c1b;
      color: #fff;
      width: 300rpx;
      height: 50rpx;
      line-height: 50rpx;
      border-radius: 30rpx;
      text-align: center;
      float: right;
    }
  }

  .tool{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 99;
    opacity: 1;
    height: 90rpx;
    background: #fff;
    box-shadow: 10rpx -10rpx 20rpx rgba(208, 208, 208, 0.62);
    display: flex;
    justify-content: space-between;
    padding: 0 20rpx;
    align-items: center;
    .yz-iconfont{
      font-size: 40rpx;
      color: #838383;
    }
    .but{
      background: #ed8c1b;
      width: 200rpx;
      height: 60rpx;
      line-height: 60rpx;
      border-radius: 30rpx;
      color: #fff;
      font-size: 28rpx;
      text-align: center;
    }
  }
</style>
